<template>
  <div>
    <el-container>
      <el-header class="consumerIndex-header">
        <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            background-color="#fff"
            text-color="#2d3c4d"
            active-text-color="#fff">
          <el-menu-item  index="1" @click="goInfo" >
            <template slot="title">
              <el-avatar :size="50" :src="userinfo.url"></el-avatar>
              <template>
                <span>昵称:  {{userinfo.nickname}}</span><br>
              </template>
            </template>
          </el-menu-item>
          <el-menu-item index="2" @click="goAddress">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>我的地址</span>
            </template>
          </el-menu-item>
          <div style="float: right;position: relative;top: 10px">
            <el-input placeholder="请输入搜索的想要的家政服务" v-model="wd" @keydown.native.enter="search()">
              <!--slot="append"作用是把按钮追加在文本框里面-->
              <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-menu>

      </el-header>
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#fff"
          text-color="#2d3c4d"
          active-text-color="#fff">
        <el-menu-item index="1">待付款</el-menu-item>
        <el-menu-item index="2">待确认</el-menu-item>
        <el-menu-item index="3">待确认</el-menu-item>
        <el-menu-item index="4">已取消</el-menu-item>
        <el-menu-item index="5">已完成</el-menu-item>
      </el-menu>

      <el-main>
        <el-table v-if="currentIndex=='1'" :data="orderArr1">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="workName" label="服务员名"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
          <el-table-column prop="kind" label="服务种类"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                         @click="productUpdate(scope.row)">取消
              </el-button>
              <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                             title="您确认删除此商品吗？">
                <el-button slot="reference" size="mini"
                           type="danger">支付
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='2'" :data="orderArr2">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="workName" label="服务员名"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
          <el-table-column prop="kind" label="服务种类"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                         @click="productUpdate(scope.row)">取消
              </el-button>
              <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                             title="您确认删除此商品吗？">
                <el-button slot="reference" size="mini"
                           type="danger">支付
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='3'" :data="orderArr3">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="workName" label="服务员名"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
          <el-table-column prop="kind" label="服务种类"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                         @click="productUpdate(scope.row)">取消
              </el-button>
              <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                             title="您确认删除此商品吗？">
                <el-button slot="reference" size="mini"
                           type="danger">支付
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='4'" :data="orderArr4">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="workName" label="服务员名"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
          <el-table-column prop="kind" label="服务种类"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                         @click="productUpdate(scope.row)">取消
              </el-button>
              <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                             title="您确认删除此商品吗？">
                <el-button slot="reference" size="mini"
                           type="danger">支付
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex=='5'" :data="orderArr5">
          <el-table-column type="index" label="编号" width="100"></el-table-column>
          <el-table-column prop="workName" label="服务员名"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约时间"></el-table-column>
          <el-table-column prop="kind" label="服务种类"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                         @click="productUpdate(scope.row)">取消
              </el-button>
              <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                             title="您确认删除此商品吗？">
                <el-button slot="reference" size="mini"
                           type="danger">支付
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

  </div>
</template>



<script>
export default {
  data() {
    return {
      currentIndex: "1",
      userinfo:{
        id:"",
        nickname:"test1",
        url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684396576&t=135385d37fd1a26e165c524d5fd6ba8f"
      },
      orderArr1:[
        {workName:"test1",appointmentTime:"2023-04-21 09:02:48",kind:"分类1"},
        {workName:"test2",appointmentTime:"2023-04-21 09:03:34",kind:"分类2"},
        {workName:"test3",appointmentTime:"2023-04-21 09:05:18",kind:"分类3"},
      ],
      orderArr2:[
        {workName:"test4",appointmentTime:"2023-04-21 09:05:58",kind:"分类1"},
        {workName:"test5",appointmentTime:"2023-04-21 09:07:11",kind:"分类2"},
        {workName:"test6",appointmentTime:"2023-04-21 09:08:48",kind:"分类3"},
      ],
      orderArr3:[
        {workName:"test7",appointmentTime:"2023-04-21 09:02:48",kind:"分类1"},
        {workName:"test8",appointmentTime:"2023-04-21 09:02:48",kind:"分类2"},
        {workName:"test9",appointmentTime:"2023-04-21 09:02:48",kind:"分类3"},
      ],
      orderArr4:[
        {workName:"test10",appointmentTime:"2023-04-21 09:02:48",kind:"分类1"},
        {workName:"test11",appointmentTime:"2023-04-21 09:02:48",kind:"分类2"},
        {workName:"test12",appointmentTime:"2023-04-21 09:02:48",kind:"分类3"},
      ],
      orderArr5:[
        {workName:"test13",appointmentTime:"2023-04-21 09:02:48",kind:"分类1"},
        {workName:"test14",appointmentTime:"2023-04-21 09:02:48",kind:"分类2"},
        {workName:"test15",appointmentTime:"2023-04-21 09:02:48",kind:"分类3"},
      ]
    }
  },
  methods: {
    goAddress() {
      this.$router.push("/consumer/up-address")
    }  ,
    goInfo() {
      this.$router.push("/consumer/up-info")
    },
    loadUser() {
      let url = 'http://localhost:9081/user/'+this.userId;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            showClose: true,
            message: '查询成功！',
            type: 'success'
          });
          this.userinfo = responseBody.data;
        } else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },
    handleSelect(key, keyPath) {
        this.currentIndex = key;
        console.log("这是",this.currentIndex)
    },
  },
  mounted() {
    console.log("个人首页初始化“：")
    // this.userId=this.$route.query.userId
    // console.log('当前的用户id：',this.userId)
    // if (this.userId != null) {
    //   this.loadUser();
    // }
    // location.reload();
  },
  watch: {
    '$route'() {
      console.log("个人首页初始化“：",data)
      this.userId=this.$route.query.userId
      console.log('当前的用户id：',this.userId)
      if (this.userId != null) {
        this.loadUser();
      }
      location.reload();

    }
  },
}
</script>



<style>
.consumerIndex-header {
  background: #ffffff;
}

.layout-header h1 {
  color: #fff;
  line-height: 60px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #222;
}

.layout-aside i {
  color: #fff !important;
}

.layout-main {
  background: #fff;
}

.el-menu-item.is-active {
  background: #2d3c4d !important;
}
</style>